
import { io } from "socket.io-client";
import { useEffect, useState } from "react";
import { useTypedSelector } from "@store/index";
import { selectToken } from "@slice/token";
import classNames from "classnames";
import { Socket } from "socket.io-client";
import { useRef } from "react";
import styles from "./styles/styles.module.less";
import Header from "@shared/header";
import Back from "@shared/back";
import GeekIcon from "@shared/geekIcon";
import { useLocation } from "react-router-dom";

// 由于 io 声明后未使用，暂时注释掉该导入






interface Message {
  type: "robot" | "user";
  message: string;
}
export default function Chat() {
  // 在组件挂载时隐藏底部导航
  // useEffect(() => {
  //   const footer = document.querySelector('.footer-nav') as HTMLElement; // 添加类型断言
  //   if (footer) {
  //     footer.style.display = 'none';
  //   }

  //   return () => {
  //     // 组件卸载时恢复底部导航
  //     if (footer) {
  //       footer.style.display = 'block';
  //     }
  //   };
  // }, []);


  // const token = useTypedSelector(selectToken);
  // const [messages, setMessages] = useState<Message[]>([]);
  // const [inputValue, setInputValue] = useState('');
  // const socketRef = useRef<Socket | null>(null);
  // const scrollContainer = useRef<HTMLUListElement | null>(null);

  // useEffect(() => {
  //   // 建立连接
  //   const socket = io("ws://toutiao.itheima.net/socket.io", {
  //     query: { token },
  //     transports: ["websocket"]
  //   });
  //   socketRef.current = socket;

  //   socket.on('connect', () => {
  //     setMessages(prev => [...prev, { 
  //       type: "robot", 
  //       message: "您想知道点啥？" 
  //     }]);
  //   });

  //   socket.on('message', (data) => {
  //     setMessages(prev => [...prev, {
  //       type: "robot",
  //       message: data.msg
  //     }]);
  //     scrollToBottom();
  //   });

  //   return () => {
  //     socket.disconnect();
  //   };
  // }, [token]);

  // const sendMessage = () => {
  //   if (!inputValue) return;
    
  //   socketRef.current?.emit('message', {
  //     msg: inputValue,
  //     timestamp: Date.now()
  //   });
    
  //   setMessages(prev => [...prev, {
  //     type: "user",
  //     message: inputValue
  //   }]);
    
  //   setInputValue('');
  //   scrollToBottom();
  // };

  // const scrollToBottom = () => {
  //   if (scrollContainer.current) {
  //     scrollContainer.current.scrollTop = scrollContainer.current.scrollHeight;
  //   }
  // };

  // 当连接成功时
  // socket.on("connect", () => {
  //   console.log("websocket 连接成功");
  //   // 断开连接
  //   socket.disconnect();
  // });

  // 当连接断开时
  // socket.on("disconnect", () => {
  //   console.log("websocket 断开连接");
  // });


  // useEffect(() => {
  //   // 建立连接
  //   const socket = io("ws://toutiao.itheima.net/socket.io/?token=c3fc8ccc-4d67-4393-acfb-f53fb455e10a&EIO=4&transport=websocket", {
  //     query: {
  //       token,
  //     },
  //     transports: ["websocket"],
  //   });
  //   // 监听连接成功
  //   socket.on("connect", () => {
  //     console.log("websocket 连接成功");
  //     // 设置默认消息列表
  //     setMessages([
  //       { type: "robot", message: "您好，小智同学为您服务。" },
  //       { type: "robot", message: "请问有什么可以帮您" },
  //     ]);
  //   });
  //   // 监听断开连接
  //   socket.on("disconnect", () => {
  //     console.log("websocket 断开连接");
  //   });
  //   // 组件销毁时执行
  //   return () => {
  //     // 断开连接
  //     socket.disconnect();
  //   };
  // }, [token]);

  // // 用于存储用户在文本框中输入的内容
  // const [message, setMessage] = useState("");
  // // 用于保存 socket 实例对象
  // const socketRef = useRef<Socket | null>(null);
  // // 用于保存滚动容器 DOM 对象
  // const scrollContainer = useRef<HTMLUListElement | null>(null);

  // // 发送消息
  // const sendMessage = () => {
  //   // 将消息添加到本地消息列表
  //   setMessages([...messages, { type: "user", message }]);
  //   // 向服务器端发送消息
  //   socketRef.current?.emit("message", {
  //     msg: message,
  //     timestamp: Date.now() + "",
  //   });
  //   // 清空文本框中的消息
  //   setMessage("");
  // };

  // // websocket
  // useEffect(() => {
  //   // 保存 socket 实例对象
  //   socketRef.current = socket;
  //   // 监听服务端响应信息
  //   socket.on("message", (response) => {
  //     // 将消息添加到本地消息列表
  //     setMessages((messages) => [
  //       ...messages,
  //       { type: "robot", message: response.msg },
  //     ]);
  //   });
  // }, [token]);

  // // 消息变化滚动到底部
  // useEffect(() => {
  //   if (scrollContainer.current === null) return;
  //   scrollContainer.current.scrollTo({
  //     top: scrollContainer.current.scrollHeight,
  //     behavior: "smooth",
  //   });
  // }, [messages]);





  const token = useTypedSelector(selectToken);
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');
  const socketRef = useRef<Socket | null>(null);
  const scrollContainer = useRef<HTMLUListElement | null>(null);

  useEffect(() => {
    // 建立连接
    const socket = io("ws://toutiao.itheima.net/socket.io", {
      query: { token },
      transports: ["websocket"]
    });
    socketRef.current = socket;

    socket.on('connect', () => {
      setMessages(prev => [...prev, { 
        type: "robot", 
        message: "您想知道点啥？" 
      }]);
    });

    socket.on('message', (data) => {
      setMessages(prev => [...prev, {
        type: "robot",
        message: data.msg
      }]);
      scrollToBottom();
    });

    return () => {
      socket.disconnect();
    };
  }, [token]);

  const sendMessage = () => {
    if (!inputValue) return;
    
    socketRef.current?.emit('message', {
      msg: inputValue,
      timestamp: Date.now()
    });
    
    setMessages(prev => [...prev, {
      type: "user",
      message: inputValue
    }]);
    
    setInputValue('');
    scrollToBottom();
  };

  const scrollToBottom = () => {
    if (scrollContainer.current) {
      scrollContainer.current.scrollTop = scrollContainer.current.scrollHeight;
    }
  };



  return (
    <div className={styles.chat}>
      <Header title={"小智同学"} left={<Back />} />
      <ul className={styles.content} ref={scrollContainer}>
        <li>
          <div className={styles.avatar} >
            <GeekIcon type={"iconbtn_xiaozhitongxue"} />
          </div>
          <div className={styles.say}>亲爱的用户您好，小智同学为您服务。</div>
        </li>
        <li>
          <div className={styles.avatar}>
            <GeekIcon type={"iconbtn_xiaozhitongxue"} />
          </div>
          <div className={styles.say}>请问有什么可以帮您</div>
        </li>
        {messages.map((item, index) => (
        <li key={index} className={classNames({ [styles.customer]: item.type === "user" })}>
          <div className={styles.avatar}>
            {item.type === "robot" ? (
              <GeekIcon type={"iconbtn_xiaozhitongxue"} />
            ) : (
              <img src={"http://toutiao.itheima.net/images/user_head.jpg"} alt={""} />
            )}
          </div>
          <div className={styles.say}>{item.message}</div>
        </li>
      ))}

      </ul>
      {/* <div className={styles.footer}>
        <input value={message} onChange={(e) => setMessage(e.target.value)} type="text"/>
        <button onClick={sendMessage}>发送</button>
      </div> */}
      <div className={styles.footer}>
        <div className={styles.edit}>
          <GeekIcon type={"iconbianji"} />
          <input 
            value={inputValue} 
            onChange={(e) => setInputValue(e.target.value)} 
            type="text" 
          />
        </div>
        <button onClick={sendMessage}>发送</button>
      </div>

    </div>
  );
}
